<template>
  <el-dialog
    :title="!formData.id ? '新建' : isDetail ? '详情' : '编辑'"
    :close-on-click-modal="false"
    :visible.sync="dialogVisible"
    @close='handleDialogCancel'
    width="680px"
  >
    <el-divider></el-divider>
    <div class="meeting-form">
      <el-form :disabled="isDetail" label-width="120px" :model="formData" :rules="rules">
        <el-row>
          <el-col :span="22" align="center">
            <el-form-item label="会议标题" prop="title">
              <el-input v-model="formData.title" maxlength="100" show-word-limit type="text"
                        placeholder="选择输入会议标题"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="22" align="center">
            <el-form-item label="组织单位" prop="ou">
              <el-input v-model="formData.ou" maxlength="100" show-word-limit type="text"
                        placeholder="选择输入组织单位"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="22" align="center">
            <el-form-item label="会议地点" prop="place">
              <el-input v-model="formData.place" maxlength="100" show-word-limit type="text"
                        placeholder="选择输入会议地点"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="13">
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker
                v-model="formData.startTime"
                type="datetime"
                placeholder="选择开始时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="预计持续时间">
              <el-input-number v-model="formData.lastTime" placeholder="分钟"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="22" align="center">
            <el-form-item label="会议概要">
              <el-input v-model="formData.summary" maxlength="200" show-word-limit type="textarea"
                        placeholder="选择输入会议概要" :autosize="{ minRows: 4, maxRows: 6 }"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="22" align="left">
            <el-form-item label="是否发布">
              <el-switch
                v-model="formData.actived"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22" align="center">
            <el-form-item label="会议位置">
              <div id="gdMap"></div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <el-button @click="handleDialogCancel">取消</el-button>
      <el-button @click="handleDialogSubmit" type="primary" v-if="!isDetail">确定</el-button>
    </template>
  </el-dialog>
</template>


<script>
import {MeetingFetchById, MeetingCreate, MeetingUpdate} from '@/api/bt/meeting/meetingData'

export default {
  name: "MeetingForm",
  data() {
    return {
      map: null,
      // * 详情标识
      isDetail: false,
      // * 弹框显示标识
      dialogVisible: false,
      //表单数据
      formData: {
        id: undefined,
        // 会议标题
        title: undefined,
        // 组织单位
        ou: undefined,
        //会议地点
        place: undefined,
        // 开始时间
        startTime: undefined,
        //持续时间
        lastTime: undefined,
        // 会议概要
        summary: undefined,
        //是否发布
        actived: undefined,
        //高德地图位置
        coord: "[]",
      },
      rules: {
        title: [
          {required: true, message: '请输入会议标题', trigger: 'blur'},
        ],
        ou: [
          {required: true, message: '请输入组织单位', trigger: 'blur'}
        ],
        place: [
          {required: true, message: '请输入会议地点', trigger: 'blur'}
        ],
        startTime: [
          {required: true, message: '请选择开始时间', trigger: 'blur'},
        ],
      },
    }
  },
  methods: {
    listMap() {
      let that = this
      this.$nextTick(() => {
        let map = new AMap.Map('gdMap', {
          zoom: 14,//级别
          center: [120.894083, 31.980647],//中心点坐标
        });
        this.map = map
        if (this.isDetail == false) {
          map.on('click', (event) => {
            let {lnglat} = event
            let {lng, lat} = lnglat
            let marker = new AMap.Marker({
              position: new AMap.LngLat(lng, lat),
              title: '会议地点'
            });
            map.add(marker);
            marker.on('rightclick', (e) => {
              map.remove(marker)
            })
          })
        }
      })

    },
    init(id = undefined, isDetail) {
      this.formData.id = id
      this.isDetail = isDetail
      this.dialogVisible = true
      this.listMap()
      if (id) {
        this.getDetailById()
      }
    },
    // * 通过id获取详情
    getDetailById() {
      let that = this;
      let id = this.formData.id
      MeetingFetchById(id).then((response) => {
        this.formData = response.data[0]
        let string = this.formData.coord
        let array = JSON.parse(string)
        for (let i = 0; i < array.length; i++) {
          let lng = array[i][0]
          let lat = array[i][1]
          let marker = new AMap.Marker({
            position: new AMap.LngLat(Number(lng), Number(lat)),
            title: '会议地点'
          });
          that.map.add(marker);
          if (this.isDetail == false) {
            marker.on('rightclick', (e) => {
              that.map.remove(marker)
            })
          }

        }
      })
    },
    //取消
    handleDialogCancel() {
      this.dialogVisible = false
      this.$emit('refresh')
    },
    //确定
    // console.log(array, )
    // JSON.parse()
    handleDialogSubmit() {
      if (this.formData.id) {
        let array = []
        let markers = this.map.getAllOverlays("marker");
        markers.forEach(item => {
          array.push([item.getPosition().lng, item.getPosition().lat])
        })
        this.formData.coord = JSON.stringify(array)
        MeetingUpdate(this.formData).then((response) => {
          this.$message({
            message: response.msg,
            type: 'success',
            duration: 1500,
          })
          this.$emit('refresh', true)
        })
      } else {
        let array = []
        let markers = this.map.getAllOverlays("marker");
        markers.forEach(item => {
          array.push([item.getPosition().lng, item.getPosition().lat])
        })
        this.formData.coord = JSON.stringify(array)
        console.log(this.formData)
        //新增
        MeetingCreate(this.formData).then((response) => {
          this.$message({
            message: response.msg,
            type: 'success',
            duration: 1500,
          })
          this.$emit('refresh', true)
        })
      }
    },
  },
  created() {
  },
  mounted() {

  }

}
</script>

<style scoped>
/deep/ .el-dialog__header {
  padding-bottom: 0px;
}

/deep/ .el-dialog__body {
  padding: 0px 0px 0px 0px;
}

/deep/ .el-divider--horizontal {
  margin: 15px 0px 15px 0px;
}

#gdMap {
  width: 100%;
  height: 210px;
}
</style>
